<template>
  <div>
<NavBar>
<!--    <div slot="left" class="left" @click="return_before"><van-icon name="arrow-left" /></div>-->
  <div slot="center">编辑资料</div>
  <div slot="right" @click="sure_message" >确定</div>
</NavBar>
<!--    这是头像区域-->
    <div class="image_header">
<van-uploader v-model="fileList" multiple max-count="1"/>
    </div>
<!--    这是资料区域-->
      <van-form validate-first @failed="onFailed">
<div class="message">
  <div class="divider_fen">

      <van-field
    v-model="value2"
    name="昵称"
    label="昵称"
    placeholder="请输入1-6位的昵称"
    :rules="[{ validator, message: '您的昵称超过了限制长度' }]"
  />

    </div>
<van-cell title="性别" is-link :value="value" @click="showPicker = true"/>
  <van-popup v-model="showPicker" round position="bottom"  >
  <van-picker
    show-toolbar
    :columns="columns"
    @cancel="showPicker = false"
    @confirm="onConfirm"
  />
</van-popup>

      <van-field
    v-model="value3"
    name="QQ号"
    label="QQ号"
    placeholder="请输入你的QQ号"

  />
  <van-cell title="球龄" is-link :value="ballage" @click="showPicker2 = true"/>
  <van-popup v-model="showPicker2" round position="bottom"  >
  <van-picker
    show-toolbar
    :columns="columns2"
    @cancel="showPicker2 = false"
    @confirm="onConfirm2"
  />
</van-popup>
  <van-field
  v-model="self_intro"
  rows="2"
  autosize
  label="简介"
  type="textarea"
  maxlength="50"
  placeholder="向大家介绍一下自己~"
  show-word-limit
/>
  </div>

 </van-form>
    </div>


</template>

<script>
import NavBar from "@/components/common/NavBar/NavBar";
import {put_message} from "@/network/Users/EditMessage";

export default {
name: "EditMessage",
  components: {NavBar},
  data(){
  return{
    self_intro:'',
      fileList: [

      ],
    genderindex:0,
    ballageindex:0,
    ballage:'',
    value3:'',
    value2:'',
          value: '',
      showPicker: false,
    showPicker2: false,
      columns: ['男','女'],
        columns2: ['1年以下','1-3年','3-5年','5年以上'],
  }
  },
  methods:{
  sure_message(){
    if (this.value.length!==0&&this.fileList[0]&&this.ballage.length!==0&&this.value2.trim().length!==0&&this.self_intro.trim().length!==0)
    {
      console.log('登录尝试');
      put_message(this.value2,this.genderindex,this.value3,this.ballageindex,this.self_intro,this.fileList[0].content).then(
        res=>{
          if(res.code===0){
            this.$router.push('/profile')}
            else{
              this.$toast('资料编辑失败，请检查')

          }
        }
    )}
    else {
      this.$toast({
        type:"fail",
        message:'信息不全'
      })
    }

  },
   onConfirm(value,index) {
      this.value = value;
      this.genderindex=index
      this.showPicker = false;
    },
       onConfirm2(value,index) {
     this.ballageindex=index
      this.ballage = value;
      this.showPicker2 = false;
    },
    validator(val) {
      return val.length<=6
    },
        validator2(val) {
          console.log('测试中');
          return /^[1-9][0-9]{4,9}$/.test(val)
    },
  return_before(){
    history.go(-1)
  },
       onFailed(errorInfo) {
      console.log('failed', errorInfo);
    },
           onFailed2(errorInfo) {
      console.log('failed', errorInfo);
    },
  },
  created() {
  this.$emit('header',false)
  }
}
</script>

<style scoped>
.image_header{
  height: 150px;
}
.left .van-icon {
    font-size: 20px;
    position: relative;
    top: 3px;
    left: -8px;
}
/deep/ .van-uploader{
  display: table-cell;
text-align: center;
position: absolute;
top: 19%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 10px 10px 10px 10px;
}
/deep/ .van-uploader__upload{
border-radius: 50px 50px 50px 50px;}


/deep/ .van-image__img{
  border-radius: 50px 50px 50px 50px
}
.message{
  padding: 0px 5px;
}
/deep/ .van-cell--clickable{
  color: #646566;
}
.divider_fen::after{
    position: absolute;
  box-sizing: border-box;
  content: ' ';
  pointer-events: none;
  right: 16px;
  bottom: 0;
  left: 16px;
  border-bottom: 1px solid #ebedf0;
  -webkit-transform: scaleY(.5);
  transform: scaleY(.5);
}
/deep/ .van-field__control{
  text-align: right;
}
/deep/ .van-cell__value{
  color: black;
}
</style>